<template>
  <div class="">
    <div class="backend-header-breadcrumb">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="backend-body">
      <div class="backend-header-button-group">
        <div class="backend-header-button">
          <a-button type="primary" @click="handleCreateBlog">
            <template #icon>
              <icon-plus />
            </template>
            创建文章
          </a-button>
        </div>
        <div>
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="请输入关键字"
            search-button
            @change="handleSearch"
          >
            <template #button-icon>
              <icon-search />
            </template>
            <template #button-default> Search </template>
          </a-input-search>
        </div>
      </div>

      <!-- page-change 表格分页发生改变时触发 page: number -->
      <!-- page-size-change 表格每页数据数量发生改变时触发 pageSize: number -->
      <div class="backend-table">
        <a-table
          :data="data.items"
          style="margin-top: 30px"
          :loading="tableLoading"
          :pagination="pagination"
          @page-change="handlePageNumberChange"
          @page-size-change="handlePageSizeChange"
        >
          <template #columns>
            <a-table-column title="序号" data-index="id"></a-table-column>

            <a-table-column title="标题">
              <template #cell="{ record }"> {{ record.title }} </template>
            </a-table-column>

            <a-table-column title="作者">
              <template #cell="{ record }"> {{ record.author }} </template>
            </a-table-column>

            <a-table-column title="概要">
              <template #cell="{ record }"> {{ record.summary }} </template>
            </a-table-column>

            <a-table-column title="状态">
              <template #cell="{ record }"> {{ blogStatus[record.status] }} </template>
            </a-table-column>

            <a-table-column title="创建时间">
              <template #cell="{ record }"> {{ dayjs.unix(record.created_at).format() }} </template>
            </a-table-column>

            <a-table-column :width="500" title="操作">
              <template #cell="{ record }">
                <a-space>
                  <a-button
                    type="primary"
                    @click="$router.push({ name: 'BackendBlogsEdit', query: { id: record.id } })"
                    >编辑</a-button
                  >
                  <a-button type="primary" status="success">发布</a-button>

                  <a-popconfirm
                    :content="`确认删除标题为【${record.title}】的文章吗？`"
                    @ok="handleDeleteBlog(record)"
                    :ok-loading="deleteLoading"
                  >
                    <a-button type="primary" status="danger">删除</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { LIST_BLOGS, DELETE_BLOG } from '@/api/vblog'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router';
const router = useRouter()

const tableLoading = ref(false)
const data = ref({ total: 0, items: [] })
const keywords = ref('')
// const pageInfo=ref({current:1,pageSize:10})
const deleteLoading = ref(false)

// 文章状态
const blogStatus = ref({ 0: '草稿', 1: '已发布' })

const handleSearch = (v) => {
  keywords.value = v
  ListBlog()
}

// 查询文章列表 params:{keywords page_size,page_number}
// 返回total和items
const ListBlog = async () => {
  try {
    tableLoading.value = true
    const resp = await LIST_BLOGS({
      keywords: keywords.value,
      page_size: pagination.value.pageSize,
      page_number: pagination.value.current
    })
    // console.log(resp)
    if (resp.status === 200 && resp.data) {
      data.value = resp.data
      pagination.value.total = data.value.total
      // console.log(data.value)
    }
  } finally {
    tableLoading.value = false
  }
}

onMounted(() => {
  ListBlog()
})

// 删除文章
const handleDeleteBlog = async (record) => {
  try {
    deleteLoading.value = true
    const resp = await DELETE_BLOG(record.id)
    console.log(resp)
  } finally {
    deleteLoading.value = false
  }
  console.log(record)
}

// 跳转到创建页面
const handleCreateBlog = () => {
  router.push({name:'BackendBlogsEdit'})
}

// 分页
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: data.value.total,
  showTotal: true,
  showMore: true,
  showJumper: true,
  showPageSize: true
})

// pageNumber改变时
const handlePageNumberChange = (current) => {
  pagination.value.current = current
  // console.log(current)
  ListBlog()
}
// pageSize改变时
const handlePageSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize
  // console.log(pageSize)
  ListBlog()
}
</script>

<style lang="css" scoped>
.backend-header-breadcrumb {
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.backend-body {
  padding-left: 5px;
  padding-right: 20px;
}

.backend-table {
  margin-left: 10px;
}
.backend-header-button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.backend-header-button {
  padding: 10px;
}
</style>
